<template>
    <div class="customerInfo">
        <div class="customerInfo-left">
            <div class="customerInfo-left-title">
                <el-row style="width: 100%;">
                    <el-col :span="24" class="left-title">
                        <div v-if="type!=='2'">
                            <img src="@/assets/style/logo.png" width="20px" />
                        </div>
                        <div class="title">
                            <h1>{{ customerName || '--' }}</h1>
                            <!-- <p v-if="type==='2'">北京市</p> -->
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="customerInfo-left-info" v-if="type!=='2'">
                <el-row>
                    <el-col :span="5" class="item_title">
                        <p style="margin-bottom: 7px;">
                            单位净值
                            <!-- [2024-03-12] -->
                        </p>
                        <span>{{ info.fundUnitValue || '--' }}</span>
                    </el-col>
                    <el-col :span="5" class="item_title">
                        <p>
                            近3月收益率
                        </p>
                        <span>{{ info.avgReturnQuarter || '--' }}</span>
                    </el-col>
                    <el-col :span="5" class="item_title">
                        <p>
                            近1年收益率
                        </p>
                        <span>{{ info.avgReturnYear || '--' }}</span>
                    </el-col>
                    <el-col :span="5" class="item_title">
                        <p>
                            客户类型
                        </p>
                        <span>{{ info.custCat || '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            贡献度排名
                        </p>
                        <span>{{ info.contributeOrder || '--' }}</span>
                    </el-col>
                </el-row>
            </div>
            <div class="customerInfo-left-info" v-if="type==='2'">
                <el-row>
                    <el-col :span="4" class="item_title">
                        <p>
                            资产规模(亿)
                        </p>
                        <span style="margin-top: 7px;"> {{ info.comSize ? info.comSize : '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            客户属性细分
                        </p>
                        <span> {{ info.customerAttributeDetail || '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            客户类型
                        </p>
                        <span>{{ info.custCat || '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            客户层级
                        </p>
                        <span>{{ info.customerLevel || '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            签署战略
                        </p>
                        <span>{{ info.strategicSign || '--' }}</span>
                    </el-col>
                    <el-col :span="4" class="item_title">
                        <p>
                            贡献度排名
                        </p>
                        <span>{{ info.contributeOrder || '--' }}</span>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="customerInfo-right" v-if="type==='2'">
            <div class="list">
                <div class="item"><span class="label">成立日期</span><span class="value">{{ info.dateOfEstablishment || '--' }}</span></div>
                <div class="item"><span class="label">注册资本</span><span class="value">{{ info.managingDirector || '--' }}</span></div>
            </div>
            <div class="list">
                <div class="item"><span class="label">法定代表人</span><span class="value">{{ info.registeredCapital || '--' }}</span></div>
                <div class="item"><span class="label">注册地</span><span class="value">{{ info.registeredAddress || '--' }}</span></div>
            </div>
            <div class="list">
                <div class="item"><span class="label">总经理</span><span class="value">{{ info.securitiesRepresentative || '--' }}</span></div>
                <div class="item"><span class="label">公司官网</span><span class="value">{{ info.comWebsite || '--' }}</span></div>
            </div>
        </div>
        <div class="customerInfo-right" v-if="type !=='2'">
            <div class="list">
                <div class="item"><span class="label">成立日期</span><span class="value">{{ info.fundEstablishDate || '--' }}</span></div>
                <div class="item"><span class="label">基金代码</span><span class="value">{{ info.assetCode || '--' }} </span></div>
            </div>
            <div class="list">
                <div class="item"><span class="label">最新规模</span><span class="value">{{ info.latestAmount || '--' }}</span></div>
                <div class="item"><span class="label">基金经理</span><span class="value">{{ info.fundManagerName || '--' }}</span></div>
            </div>
            <div class="list">
                <div class="item"><span class="label">基金公司</span><span class="value">{{ info.fundCom || '--' }}</span></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  props: {
    type: {
        type:  String | Number
    },
    info:{
        type:Object
    },
    customerName:{
      type: String,
    }
  },
  data() {
    return {
    }
  },
  created(){
  
  },
  mounted() {
    console.log(this.type,'645645')
  },
  methods: {
    toCustomerView() {
    
    },
    pageFn() {},
  },
}
</script>
<style lang="scss" scoped>
.customerInfo {
  width: 100%;
  color: #fff;
  height: 120px;
  background-color:  #1B2238;
  display: flex;
  align-items: center;
  .customerInfo-left{
    width: 60%;
    display: flex;
    height: 120px;
    background-color: #262d47;
    flex-direction: column;
    padding: 30px 16px 30px 30px;
    .customerInfo-left-title{
        width: 100%;
        .left-title{
            display: flex;
            align-items: center;
        }
        .title{
            display: flex;
            align-items: flex-end;
            margin-left: 3px;
            h1{
                font-size: 14px;
            }
            P{
                font-size: 12px;
                margin-left: 20px;
            }
        }
    }
    .customerInfo-left-info{
        width: 100%;
        margin-top: 5px;
        p{  
            font-size: 12px;
            color: #CACEE3;
        }
        span{
            font-size: 14px;
            color: #FFFFFF;
            font-weight: 650;
            margin-top: 7px;
            font-family: 'PingFangSC-Semibold';
        }
    }
  }
  .customerInfo-right{
    width: 40%;
    height: 100%;
    height: 120px;
    background-color: #262d47;
    padding: 30px 16px 30px 30px;
    margin-left: 10px;
    .list{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
         >.item{
            width: 50%;
            display: flex;
            align-items: center;
            >.label{
                color: #CACEE3;
                font-size: 12px;
                min-width: 90px;
            }
            >.value{
                font-size: 12px;
                color: #FFFFFF;
            }
        }
    }
    &:last-child{
        margin-bottom: 0;
    }
  }

  ::v-deep .el-row .el-col:not(:first-child) {
    border-left: 1px solid rgba(126, 163, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
}

</style>
